<template>
  <div>
    <div class="nav">
      <!-- 路由 params 参数 字符串格式 -->
      <!-- <router-link
        active-class="active"
        v-for="message in messageList"
        :key="message.id"
        :to="`/home/news/detail/${message.id}/${message.msg}`"
      >
        {{ message.msg }}
      </router-link> -->
      <!-- 路由 query 参数 对象格式 -->
      <h1 :style="{ opacity }">欢迎来到Vue</h1>

      <router-link
        v-for="message in messageList"
        :key="message.id"
        :to="{
          name: 'NewsDetail', // 使用命名路由,与router中配置的路由name对应
          query: {
            id: message.id,
            msg: message.msg,
          },
        }"
      >
        {{ message.msg }}
        <input type="text" />
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "News",
  data() {
    return {
      opacity: 1,

      messageList: [
        {
          id: "1",
          msg: "news1",
        },
        {
          id: "2",
          msg: "news2",
        },
        {
          id: "3",
          msg: "news3",
        },
      ],
    };
  },
  methods: {
    change() {
      this.timer = setInterval(() => {
        console.log("opacity change");
        this.opacity -= 0.01;
        if (this.opacity <= 0) {
          this.opacity = 1;
        }
      }, 16);
    },
  },
  beforeDestroy() {
    console.log("news组件即将销毁");
  },
  activated() {
    console.log("news组件被激活");
    this.change();
  },
  deactivated() {
    clearInterval(this.timer);
    console.log("news组件失活了");
  },
};
</script>

<style scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;
}
</style>
